<template>
  <div>
    <!-- 平安社区 -->
    <div class="data_bodey">
      <div class="index_nav">
        <myheader current="shequ"></myheader>
        <div
          style="
            opacity: 1;
            font-size: 26px;
            letter-spacing: 6px;
            text-align: center;
          "
          class="total_chose_pl abs t_title"
        >
          城市安保运营服务中心
        </div>
        <div class="total_chose_box">
          <div style="height: 32px"></div>
          <span class="chose_tltle">请选择小区：</span>
          <select class="year_chose">
            <option>马尔康林业局小区</option>
          </select>
          <button class="chose_enter">确定</button>
        </div>
        <div class="index_tabs">
          <div class="inner">
            <div class="bg3 mt10"></div>
            <div class="data_left01">
              <div class="dataAll maginS">
                <div class="dataAllBorder01">
                  <div class="dataAllBorder02">
                    <div class="data_tit1">年龄分布</div>
                    <div class="data_chart">
                      <Age></Age>
                    </div>
                  </div>
                </div>
              </div>
              <div class="dataAll">
                <div class="dataAllBorder01">
                  <div class="dataAllBorder02">
                    <div class="data_tit1">人员类型分析</div>
                    <div class="data_chart">
                      <Types @getTotal="change($event)"></Types>
                    </div>
                  </div>
                </div>
              </div>
              <div class="dataAll">
                <div class="dataAllBorder01">
                  <div class="dataAllBorder02">
                    <div class="data_tit1">男女比例</div>
                    <p class="data_chart">
                      <Gender @MarkTypeTotal="GET_TOTAL($event)"></Gender>
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div class="data_left01">
              <div class="dataAll maginS">
                <div class="dataAllBorder01">
                  <div class="dataAllBorder02">
                    <div class="data_tit1">外来人员户籍比</div>
                    <p class="data_chart">
                      <PassTrend
                        @MarkTypeTotal="getno_local($event)"
                      ></PassTrend>
                    </p>
                  </div>
                </div>
              </div>
              <div class="dataAll">
                <div class="dataAllBorder01">
                  <div class="dataAllBorder02">
                    <div class="data_tit1">临时车同行趋势</div>
                    <p class="data_chart">
                      <CarTrend></CarTrend>
                    </p>
                  </div>
                </div>
              </div>
              <div class="dataAll">
                <div class="dataAllBorder01">
                  <div class="dataAllBorder02">
                    <div class="data_tit1">月租车通行趋势</div>
                    <p class="data_chart">
                      <CarMonthTrend></CarMonthTrend>
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div class="data_left02">
              <div class="dataAll01">
                <div class="dataAllBorder01">
                  <div class="dataAllBorder02">
                    <div class="data_tit2">数据汇总</div>

                    <table class="table_data01">
                      <tr>
                        <td>人员总数</td>
                        <td colspan="3" id="personPassTotal" class="font01">
                          {{ total }}
                        </td>
                      </tr>
                      <tr>
                        <td>车辆通行总数</td>
                        <td colspan="3" id="carPassTotal" class="font02">
                          {{ carPassTotal || 105100 }}
                        </td>
                      </tr>
                      <tr>
                        <td>外来人员总数：</td>
                        <td>{{ no_local }}人</td>
                        <td>类型数：</td>
                        <td>5个</td>
                      </tr>
                      <tr>
                        <td>今日行人刷脸次数：</td>
                        <td>{{ todayPassTotal }}</td>
                        <td>本周行人刷脸次数：</td>
                        <td>{{ moringAlert }}</td>
                      </tr>
                      <tr>
                        <td>今日车辆通行次数：</td>
                        <td>{{ carTodayPass }}</td>
                        <td>刷脸总次数：</td>
                        <td>{{ NoPassCount }}</td>
                      </tr>
                      <tr>
                        <td>今日临时车通行次数：</td>
                        <td>{{ todayTemporary }}</td>
                        <td>房屋总数：</td>
                        <td>631</td>
                      </tr>
                      <tr>
                        <td>今日月租车通行次数：</td>
                        <td>{{ todayTenent }}</td>
                        <td>特殊群体人数：</td>
                        <td>{{ MarkTotalNum }}</td>
                      </tr>
                      <tr>
                        <td>人员迁入：</td>
                        <td colspan="3" style="color: red">{{ peo_in }}</td>
                      </tr>
                      <tr>
                        <td>人员迁出：</td>
                        <td colspan="3" style="color: red">{{ peo_out }}</td>
                      </tr>
                    </table>
                  </div>
                </div>
              </div>
              <div class="dataAll02">
                <div class="dataAllBorder01">
                  <div class="dataAllBorder02">
                    <div class="data_tit1">技防数据</div>
                    <p class="data_chart">
                      <Technical></Technical>
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div class="data_left01" style="margin-left: 0">
              <div class="dataAll maginS">
                <div class="dataAllBorder01">
                  <div class="dataAllBorder02">
                    <div class="data_tit1">房屋占比</div>
                    <p class="data_chart">
                      <House></House>
                    </p>
                  </div>
                </div>
              </div>
              <div class="dataAll">
                <div class="dataAllBorder01">
                  <div class="dataAllBorder02">
                    <div class="data_tit1">特殊人群比</div>
                    <p class="data_chart">
                      <Crowd @MarkTypeTotal="MarkTotal($event)"></Crowd>
                    </p>
                  </div>
                </div>
              </div>
              <div class="dataAll">
                <div class="dataAllBorder01">
                  <div class="dataAllBorder02">
                    <div class="data_tit1">人员迁入迁出</div>
                    <p class="data_chart">
                      <PassRatio
                        @MarkTypeTotal="getInAndOut($event)"
                      ></PassRatio>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import myheader from "@/components/header";
import Age from "@/pages/echarts/community/age";
import Types from "@/pages/echarts/community/Types";
import Gender from "@/pages/echarts/community/Gender";
import PassTrend from "@/pages/echarts/community/PassTrend";
import CarTrend from "@/pages/echarts/community/CarTrend";
import CarMonthTrend from "@/pages/echarts/community/CarMonthTrend";
import Technical from "@/pages/echarts/community/Technical";
import House from "@/pages/echarts/community/House";
import Crowd from "@/pages/echarts/community/Crowd";
import PassRatio from "@/pages/echarts/community/PassRatio";
import user from "@/api/user";
import { getToken, setToken } from "@/utils/auth";
export default {
  components: {
    myheader,
    Age,
    Types,
    Gender,
    PassTrend,
    CarTrend,
    CarMonthTrend,
    Technical,
    House,
    Crowd,
    PassRatio,
  },
  props: {},
  data() {
    return {
      todayPassTotal: 1060,
      total: 1000,
      MarkTotalNum: 12,
      personPassTotal: 32102,
      moringAlert: 0,
      carTodayPass: 20190,
      todayTenent: 1092,
      todayTemporary: 890,
      AItotal: 20120,
      NoPassCount: 22102,
      peo_in: 1246,
      peo_out: 64,
      no_local: 350,
      carPassTotal: 11231,
    };
  },
  mounted() {
    let token = this.$store.state.app.token;
    if (!token) {
      this.Login();
    }
  },
  created: function () {
    this.getcarTodayPass();
    // this.getAITotal();
    // this.getNoPassCount();
    this.getPass_count();
    this.GET_Other_Province();
    this.GET_CAR_TOTAL();
  },
  methods: {
    async Login() {
      let that = this;
      let para = {
        username: that.$store.state.app.username,
        password: that.$store.state.app.password,
      };
      const res = await user.login(para);
      setToken(res.data.token);
    },
    //车辆通行总数
    GET_CAR_TOTAL() {
      let that = this;
      that.axios
        .get(`${that.$store.state.http4}/getCarPassList`, {
          params: {
            page: 1,
            limit: 1,

            type: 3,
          },
        })
        .then((res) => {
          that.carPassTotal = res.data.count;
        });
    },
    GET_TOTAL(e) {
      this.total = e;
    },
    async GET_Other_Province() {
      let res = await user.home_person_statistics();
      this.no_local = res.data.outland;
    },
    //获取三期通行数据
    async getPass_count() {
      let that = this;
      let res = await user.sys_pass_statistics();
      let o = res.data;
      that.moringAlert = o.week;
      that.NoPassCount = o.total;
      let data = await user.sys_pass_day_statistics();
      that.todayPassTotal = data.data.day;
    },
    MarkTotal(e) {
      this.MarkTotalNum = e;
    },
    getInAndOut($event) {
      (this.peo_in = $event.peo_in), (this.peo_out = $event.peo_out);
    },
    getno_local($event) {
      // this.no_local = $event;
    },
    getNoPassCount() {
      let that = this;
      that.axios
        .post(`${that.$store.state.http2}/main/business/alarm/getList`, {
          type: 1,
          status: 0,
          page: 2,
          limit: 10,
        })
        .then((res) => {
          that.NoPassCount = res.data.count;
        });
    },
    getAITotal() {
      let that = this;
      that.axios
        .get(
          `${that.$store.state.http3}/getUploadLog?page=1&limit=1&xqid=513229110000-001`
        )
        .then((res) => {
          that.AItotal = res.data.count * 50;
        });
    },
    getcarTodayPass() {
      let that = this;
      that.axios.get(`${that.$store.state.http4}/getTodayPass`).then((res) => {
        that.carTodayPass = res.data.count;
        that.todayTenent = res.data.tenent;
        that.todayTemporary = res.data.temporary;
      });
    },

    getCurrent(d) {
      var date;
      if (d) {
        date = new Date(d);
      } else {
        date = new Date();
      }
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var current = year + seperator1 + month + seperator1 + strDate;
      return current;
    },

    format(time, format) {
      var t = new Date(time);
      var tf = function (i) {
        return (i < 10 ? "0" : "") + i;
      };
      return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
        switch (a) {
          case "yyyy":
            return tf(t.getFullYear());
          case "MM":
            return tf(t.getMonth() + 1);
          case "mm":
            return tf(t.getMinutes());
          case "dd":
            return tf(t.getDate());
          case "HH":
            return tf(t.getHours());
          case "ss":
            return tf(t.getSeconds());
        }
      });
    },

    change(data) {
      this.total = data;
    },
  },
};
</script>
<style lang="scss">
</style>